<template>
<div class="BashStepForm14">
    <el-form :model="ruleForm" ref="ruleForm" label-width="220px" class="demo-ruleForm" :rules="rules">
        <div class="must">
            <!-- <el-form-item label="联系人：" prop="contact">
                <el-input v-model="ruleForm.contact" placeholder="请填写联系人"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：联系人不能为空</span>
                        <span>示例：张三</span>
                    </div>
                </div>
            </el-form-item> -->
            <!-- <el-form-item label="代理机构名称：" prop="agent">
                <el-input v-model="ruleForm.agent" placeholder="请填写代理机构名称"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：代理机构名称:公司名称</span>
                        <span>示例：北京市xxx网络科技有限公司</span>
                    </div>
                </div>
            </el-form-item> -->
            <el-form-item label="商标申请号：" prop="regist_num">
                <el-input v-model="ruleForm.regist_num" placeholder="请填写商标申请号"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>示例：2515783543</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="原删减申请号：" prop="registNumOri">
                <el-input v-model="ruleForm.registNumOri" placeholder="请填写原删减申请号"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：原删减申请号不能为空</span>
                        <span>示例：北京市xxx网络科技有限公司/张三</span>
                    </div>
                </div> -->
            </el-form-item>

            <!-- 网上确认书： -->
            <el-form-item class="upload" label="网上确认书：" prop="afterAmount">
                <span id="staz">*</span>
                <upfile :callback="setSure"><img v-if="ruleForm.qrfilesUrl" style="width:148px;height:148px;margin-bottom:10px" :src="ruleForm.qrfilesUrl" alt /></upfile>
                <div class="exam-img">
                    <div class="img-inform">
                        <img src="../../assets/imgs/inform.png">
                        <span>示例:</span>
                    </div>
                    <examimg :imgType="7"></examimg>
                </div>
                <div>
                    <span class="informs">
                        请点此
                        <a :href="mconfig.host + '/file/download?fileType=4'">下载网上确认书</a>,查到相应商标编号并填充
                    </span>
                    <br />
                    <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PDF文件</span>
                </div>
            </el-form-item>
            <el-form-item label="其他附件：" prop="dengjichenluofile">
            <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
            <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                <span>提示：其他附件</span>
                </div>
            </div>
            </el-form-item>

            <el-form-item label="撤回理由：" prop="reasonsWithdrawal">
                <el-input type="textarea" v-model="ruleForm.reasonsWithdrawal" placeholder="请填写撤回理由"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：撤回理由不能为空</span>
                        <span>示例：北京市xxx网络科技有限公司/张三</span>
                    </div>
                </div> -->
            </el-form-item>

            <div class="line"></div>

            <el-form-item label="是否共有商标：">
                <span id="star">*</span>
                <el-radio v-model="ruleForm.share" :label="1">是</el-radio>
                <el-radio v-model="ruleForm.share" :label="0">否</el-radio>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：选项不能为空</span>
                        <span>示例：北京市xxx网络科技有限公司/张三</span>
                    </div>
                </div> -->
            </el-form-item>
            <div v-if="ruleForm.share == 1" class="common">
                <el-form-item label="其他共有人：" >
                    <both :callback="getBoth" :append="$store.state.alterData.append" :class_id="$route.query.id"></both>
                </el-form-item>
            </div>
            <!-- <template v-if="!!(ruleForm.share)">
                <el-card v-for="(item,index) in proAppends" :key="index">
                    <div class="less">
                        <i class="el-icon-circle-close cursor" @click="cutShare(index)"></i>
                    </div>
                    <el-form :model="proAppends[index]" ref="proAppends" label-width="220px" class="demo-ruleForm" :rules="rules2">
                        <el-form-item label="名称(中文)：" prop="partNameCh">
                            <el-input v-model="proAppends[index].partNameCh" placeholder="请填写中文名称"></el-input>
                        </el-form-item>
                        <el-form-item label="名称(英文)：" prop="partNameEn">
                            <el-input v-model="proAppends[index].partNameEn" placeholder="请填写英文名称"></el-input>
                        </el-form-item>
                        <el-form-item label=" 地址(中文)：" prop="partAddrCh">
                            <el-input v-model="proAppends[index].partAddrCh" placeholder="请填写中文文地址"></el-input>
                            <div class="inform">
                                <img src="../../assets/imgs/inform.png" alt="通知" />
                                <div class="content">
                                    <span>示例：北京市xx区xx街xx号</span>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="地址(英文)：" prop="partAddrEn">
                            <el-input v-model="proAppends[index].partAddrEn" placeholder="请填写英文地址"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div class="add">
                    <i class="el-icon-circle-plus-outline cursor" @click="addShare"></i>
                    <i class="el-icon-remove-outline cursor" style="margin-left:40px;" @click="reduceShare"></i>
                </div>
            </template> -->

            <el-form-item>
                <div class="btns">
                    <el-button type="primary" @click="outStep">上一步</el-button>
                    <!-- <el-button type="primary" @click="dialogVisible = true">提交并审核</el-button> -->
                    <el-button type="primary" @click="testing('ruleForm','proAppends')">提交并审核</el-button>
                </div>
            </el-form-item>
            <el-dialog class="outletDialog" :show-close="false" :visible.sync="dialogVisible" width="25%">
                <div class="outletTop">
                    <i class="el-icon-message-solid"></i>
                    <span>选择你想去办理的网点</span>
                </div>
                 <el-row   type="flex" class="el-style">                <!--  :span="6" -->
                    <el-col :span="10" class="text">
                        <i></i>选择网点：
                    </el-col>
                    <el-col :span="20">
                        <el-select v-model="ruleForm.branchNetworkId" placeholder="请选择">
                            <el-option v-for="item in outletsList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button type="info" @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 认</el-button>
                </span>
            </el-dialog>
            <el-dialog class="hintMsg" :show-close="false" title="温馨提示" :visible.sync="centerDialogVisible" width="462px" @close="skip()">
                <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="skip">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </el-form>
</div>
</template>

<script>
import upfile from "../common/upfile";
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
import {
    mapState
} from "vuex";
export default {
    components: {
        upfile,both,examimg,uploads
    },
    data() {
        return {
            ruleForm: {
                // contact: "", // 联系人
                // agent: "", // 代理机构名称
                regist_num: "", // 商标申请号/注册号
                registNumOri: "", // 原删减申请号
                share: 0, // 是否共有商标
                reasonsWithdrawal: "", // 撤回理由
                dengjichenluofile:[],
                qrfiles: "", // 网上确认书

                showImg: '', // 是否有网上确认书
                branchNetworkId: "", // 网点编号
                // userId: this.$store.state.userId, // 用户id
                classId: "", // 业务id
                qrfilesUrl: "", // 后端返回确认书图片框地址
            },
            // proAppends2: {
            //     partNameCh: "", // 共有人名义（中文）
            //     partNameEn: "", // 共有人名义（英文）
            //     partAddrCh: "", // 共有人 地址（中文）
            //     partAddrEn: "", // 共有人 地址（英文）
            // },
            // 共有人列表
            proAppends: [{
                partNameCh: "", // 共有人名义（中文）
                partNameEn: "", // 共有人名义（英文）
                partAddrCh: "", // 共有人 地址（中文）
                partAddrEn: "", // 共有人 地址（英文）
            }, ],
            commonData:[],
            outletsList: [], // 网点列表
            dialogVisible: false,
            centerDialogVisible: false, //提交成功弹出框变量

            throttling: "", // 节流

            addshare: true, //增删按钮的隐藏显示
            rules2: {
                partNameCh: [
                    // 联系人名称
                    {
                        required: true,
                        message: "内容不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5]{2,5}$/,
                        message: "名字输入错误"
                    },
                ],
                // dengjichenluofile: [
                // { required: true, message: "附件不能为空", trigger: "change" },
                // ],
                partNameEn: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                partAddrEn: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                partAddrCh: [
                    // 联系人名称
                    {
                        required: true,
                        message: "内容不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^([\u4E00-\u9FA5]|[0-9]){6,30}$/,
                        message: "地址输入错误"
                    },
                ],
            },
            rules: {

                // contact: [
                //     // 联系人名称
                //     {
                //         required: true,
                //         message: "内容不能为空",
                //         trigger: "change"
                //     },
                //     {
                //         pattern: /^[\u4E00-\u9FA5]{2,5}$/,
                //         message: "名字输入错误"
                //     },
                // ],
                agent: [
                    // 联系人名称
                    {
                        required: true,
                        message: "选项不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5]{2,20}$/,
                        message: '名字输入错误'
                    }
                ],
                regist_num: [
                    // 商标申请号
                    {
                        required: true,
                        message: "请输入商标申请号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^[A-Za-z0-9]{0,30}$/,
                        message: "请输入正确的商标申请号",
                        trigger: "blur",
                    },
                ],
                registNumOri: [
                    // 原删减申请号
                    {
                        required: true,
                        message: "请输入申请号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^[A-Za-z0-9]{0,30}$/,
                        message: "请输入正确的申请号",
                        trigger: "blur",
                    },
                ],
                reasonsWithdrawal: [
                    // 撤回理由
                    {
                        required: true,
                        message: "内容不能为空",
                        trigger: "change"
                    },
                    // { pattern: /^[\u4E00-\u9FA5]{2,5}$/, message: '名字输入错误' }
                    {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],
            },

        };

    },
    computed: {
        ...mapState(["stateJdg", "alterData"]),
    },
    methods: {
        backUrl(url,file_config){
            this.ruleForm[file_config["field"]].push(url)
        },
        delUrl(index,file_config){
            this.ruleForm[file_config["field"]].splice(index,1)
            this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
        },
        // 提交并审核验证
        getBoth(value){
            console.log(value,145645);
            this.commonData = value;
        },
        // 提交并审核验证
        getBoth(value){
            console.log(value,145645);
            this.commonData = value;
        },
        //确认书
        setSure(files) {
            this.ruleForm.qrfiles = files[0];
            if (this.ruleForm.qrfiles) {
                this.showImg = true
            } else {
                this.showImg = false
            }

            this.ruleForm.qrfilesUrl = ""; // 修改img图片地址隐藏img
        },
        //返回上一步
        outStep() {
            this.$emit("wp", 1, "请填写申请业务信息");
        },
        //提示模板
        open1(msg, types = "success") {
            this.$message({
                message: msg,
                type: types,
            });
        },
        // 提交前验证
        testing(formName, proAppends) {
            if(this.ruleForm.share==1){
                if (this.commonData.length == 0) { //没填共有人
                this.open1("请填写共有人信息！", "error");
                return;
                }
            }
            // console.log(this.ruleForm.qrfiles);
            console.log(proAppends);
            this.$refs[formName].validate((valid) => {
                // if (this.ruleForm.share == 1) {
                //     if (valid == false) {
                //         this.dialogVisible = false
                //         this.$message.error('信息填写不完整');
                //     } else {
                //         for (let i = 0; i < this.$refs.proAppends.length; i++) {
                //             this.$refs[proAppends][i].validate((valid) => {
                //                 if (valid == false) {
                //                     this.dialogVisible = false
                //                     this.$message.error('信息填写不完整');
                //                 } else {
                //                     if (this.showImg) {
                //                         this.dialogVisible = true
                //                     } else {
                //                         this.open1("网上确认书未上传", "error");
                //                     }
                //                 }
                //             })

                //         }
                //         this.dialogVisible = true
                //     }

                // } else {
                //     if (valid == false) {
                //         this.dialogVisible = false
                //         this.$message.error('信息填写不完整');
                //     } else {
                //         if (this.showImg) {
                //             this.dialogVisible = true
                //         } else {
                //             this.open1("网上确认书未上传", "error");
                //         }

                //     }
                // }
                if (valid && this.showImg == true) {
                    this.dialogVisible = true;
                } else if (this.showImg == false) {
                    this.open1("请上传网上确认书", "error");
                } else {
                    this.open1("请完整填写表单数据", "error");
                }
            })

        },

        // 表单提交确认事件
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.throttling && Date.now() - this.throttling < 1500)
                        return this.$message.warning("请勿重复操作");
                    this.throttling = Date.now();

                    // 实例化FormData
                    let formData = new FormData();

                    /*********************** 公共数据开始 **********************/
                    // 获取vuex中保存的步骤一、二中的数据
                    let arr = this.$store.getters.getRuleForm;
                    for (let key in arr) {
                        formData.append(key, arr[key]);
                    }
                    /*********************** 公共数据结束 **********************/

                    /*********************** 需要提交的数据开始 **********************/
                    // 第三步：我的表单数据发送
                    for (let key in this.ruleForm) {
                        formData.append(key, this.ruleForm[key]);
                    }

                    // 共有人
                    // this.ruleForm.share === "1" &&
                    formData.append("proAppends", JSON.stringify(this.commonData));
                    formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile)); 

                    /*********************** 需要提交的数据结束 **********************/

                    /*********************** 请求开始 **********************/
                    let urls = "";
                    if (this.stateJdg) {
                        // 修改操作
                        formData.append("id", this.alterData.public.id); // 修改才需要传的id
                        formData.append("modelId", this.alterData.public.modelId); // 修改才需要传的modelId

                        urls = "/trademark/proWodgspa/modifyNoCommit";
                    } else {
                        // 新增操作F
                        urls = "/trademark/proWodgspa/firstSubmit";
                    }

                    //配置请求头
                    let config = {
                        header: {
                            "Content-Type": "multipart/form-data",
                        },
                    };

                    // 请求接口：修改 / 添加
                    this.$http
                        .post(urls, formData, config)
                        .then((response) => {
                            //若状态码不为200则不跳转
                            if (response.data.code != 200) {

                                this.dialogVisible = false
                                this.open1("信息填写不完整", "error");

                                return;
                            }
                            this.centerDialogVisible = true; // 成功
                            this.dialogVisible = false
                        })
                        .catch((error) => {});
                    /*********************** 请求结束 **********************/
                } else {

                    return false;
                }
            });
        },
        // 提交请求
        requerstCommit() {},

        // 选择网点
        selectNetworkId() {
            this.ruleForm.dialogVisible = true;
        },
        //跳转函数
        skip() {
            this.centerDialogVisible = false;
            this.open1("操作成功");
            this.$router.push({
                path: "/business/myBusiness/auditing",
            });
        },
        // 删减共有人
        cutShare(index) {
            // if (this.proAppends.length > 1) {
            //     this.$confirm('此操作将删除此组所有内容, 是否继续?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         this.proAppends.splice(index, 1);
            //         this.$message({
            //             type: 'success',

            //             message: '删除成功!'

            //         });
            //     }).catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '已取消删除'
            //         });
            //     });

            // } else {
            //     this.open1("必须填写一条数据", "error");
            // }
        },
        // 添加共有人
        addShare() {
            this.proAppends.push({
                partNameCh: "",
                partNameEn: "",
                partAddrCh: "",
                partAddrEn: "",
            });

        },
        reduceShare() {
            // if (this.proAppends.length > 1) {

            //     this.$confirm('此操作将删除最下面一组内容, 是否继续?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         this.proAppends.pop()
            //         this.$message({
            //             type: 'success',

            //             message: '删除成功!'

            //         });
            //     }).catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '已取消删除'
            //         });
            //     });

            // } else {
            //     this.open1("必须填写一条数据", "error");
            // }

        },
    },
    created() {
        //获取从存储在路由中的classId
        this.ruleForm.classId = this.$route.query.id;
        //获取网点列表
        this.$http.get("/trademark/system/dept/findDept").then(({
            data: res
        }) => {
            if (res.code !== 200) return; //console.error("网点列表获取失败");
            this.outletsList = res.data;
        });
    },
    mounted() {
        // 修改操作页面回显数据
        if (this.stateJdg) {
            //console.log(this.alterData)
            // 第三步骤——数据回显
            this.showImg = true;
            let {
                // contact, // 联系人
                agent, // 代理机构名称
                regist_num, // 商标申请号/注册号
                registNumOri, // 原删减申请号
                otherfile,
                share, // 是否共有商标
                reasonsWithdrawal, // 撤回理由
                branchNetworkId, // 网点编号
            } = this.alterData.data;
            let {
                qrfile, // 网上确认书
            } = this.alterData.public;
            let append = this.alterData.append;
            // 共有人信息json

            // this.ruleForm.contact = contact; // 联系人
            // this.ruleForm.agent = agent; // 代理机构名称
            this.ruleForm.regist_num = regist_num; //商标申请号/注册
            this.ruleForm.registNumOri = registNumOri; // 原删减申请号
            this.ruleForm.share = JSON.parse(JSON.stringify(share)); // 是否共有商标
            this.ruleForm.reasonsWithdrawal = reasonsWithdrawal; // 撤回理由
            this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);
            this.ruleForm.qrfilesUrl = this.mconfig.host + String(qrfile); // 后端返回确认书地址
            this.ruleForm.branchNetworkId = JSON.parse(branchNetworkId); // 网点

            // 其他共有人数据回显
            let templateArr = [];
            Array.isArray(append) &&
                append.forEach((item, index) => {
                    templateArr.push({
                        partNameCh: item.partNameCh, // 共有人名称（中文）
                        partNameEn: item.partNameEn, // 共有人名称（英文）
                        partAddrCh: item.partAddrCh, // 共有人地址（中文）
                        partAddrEn: item.partAddrEn, // 共有人地址（英文）
                    });
                });
            this.proAppends = templateArr;
        }
    },
};
</script>

<style lang="less" scoped>
.cursor {
    cursor: pointer;
}

.BashStepForm14 {
    width: 550px;

    .el-card {
        position: relative;
        overflow: visible;
        box-shadow: none;
        border: none;

        .less {
            position: absolute;
            right: -5rem;
            top: 1.5rem;
            width: 5rem;
            text-align: center;
            font-size: 1rem;

            i {
                margin: 0 0.5rem;
            }
        }
    }

    .must,
    .select {
        display: flex;
        position: relative;
        left: -60px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 0 30px;
        // width: 1000px;
        // border: 1px solid #bbbbbb;
        border-radius: 10px;

        .inform {
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            left: 100%;
            width: 250px;
            height: 32px;
            color: #F96900;
            font-size: 10px;
            line-height: 16px;

            img {
                margin: 11px;
            }

            .content {
                display: flex;
                flex-direction: column;

                .ts {
                    text-indent: 3em;
                }
            }
        }

        .el-form-item {
            width: 580px;
        }

        .inline {
            display: flex;

            .el-form-item {
                margin: 0;
                width: 290px !important;
            }

            margin-bottom: 22px;
        }
    }

    .informs {
        position: absolute;
        width: 500px;
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .notice {
        color: #F96900;
        font-size: 12px;
    }

    .add {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .upload {
        margin: 20px 0;
    }

    .outletDialog {
        
        padding: 1.7rem 1.9rem;

        .outletTop {
            // border: 1px solid red;
            height: 2rem;
            color: #F96900;
            font-size: 12px;
           
            line-height: 2rem;

            i {
                width: 15px;
                height: 15px;
            }
            
        }
        .el-style{
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
             .text{
                //  border: 1px solid red;
                 text-align: center;
                 line-height: 2rem;
            }
        }
       

        // /deep/.el-dialog {
        //     width: 460px !important;

        //     .el-input__inner {
        //         width: 12.5rem;
        //     }

        //     .el-button {
        //         // width: 4rem;
        //         // height: 1.6rem;
        //         // padding: 0;
        //         // line-height: 1.6rem;
        //     }

        //     .dialog-footer {
        //         display: flex;
        //         justify-content: space-between;
        //         color: #fff;

        //         .lan {
        //             background-color: #2c9dfc !important;
        //             border-color: #2c9dfc !important;
        //         }
        //     }

        // .el-row {
        //     margin-top: 1.6rem;
        //     height: 1.6rem;
        //     line-height: 1.6rem;
        //     margin-bottom: 4rem;

        //     /deep/.el-input__inner {
        //         // height: 1.6rem;
        //     }

        //     .text i {
        //         color: red;
        //         font-size: 1rem;
        //         vertical-align: sub;
        //         padding: 0 3px;
        //     }

        //     .text {
        //         white-space: nowrap;
        //     }

        //     .el-select {
        //         margin-left: 1rem;
        //     }
        // }
        // }
    }
}

.el-message-box__btns {
    text-align: center;
}

//fiexed dialog 0902 

.dialog-footer {
    display: flex;
    justify-content: space-between;
    color: #fff;

    .lan {
        background-color: #2c9dfc !important;
        border-color: #2c9dfc !important;
    }
}

.dialog /deep/.el-form-item__label {
    width: 100px !important;
}

.dialog /deep/.el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}

.dialog /deep/.el-input {
    width: 250px;
}

/deep/ .el-dialog /deep/ {
    .el-dialog__header {
        padding: 0;
    }

    .el-dialog__body {
        padding: 20px 20px 50px;
    }

    .outletTop {
        height: initial !important;
        color: initial !important;
        font-size: 14px !important;
        line-height: initial !important;
        color: #F96900 !important;
        background-color: #fff !important;
        padding: 0 !important;
        padding-bottom: 20px !important;

    }

    .el-button {
        margin: 0;
    }

    .el-form-item__label {
        width: 86px !important;
    }

    .el-col-5 {
        line-height: 36px;
    }

    .el-input__inner {

        height: 36px;
        line-height: 36px;
    }
}

.line {
    width: 55vw;
    max-width: 1200px;
    margin: 20px auto;
    margin-left: -10%;
    height: 1px;
    min-width: 630px;
    border-top: 1px dashed #d9d9d9;
}

.btns {
    margin-top: 35px;

    .el-button {
        margin-right: 20px;
    }
}

// /deep/ .el-form-item__error{
//   color: #f96900;
// }
.hintMsg {
/deep/.el-dialog__header {
display: flex;
justify-content: center;
font-weight: bold;
}
.dialog-footer {
justify-content: center;
.el-button {
    border-color: #2c9dfc !important;
    background: #2c9dfc !important;
}
}
}
#star{
  position: absolute;
  color: red;
  margin-left: -120px;
}
#staz{
  position: absolute;
  color: red;
  margin-left: -105px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 445px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>
